> Understand layout tools 

> Create a navigation bar 

> Create a frameset 

> Target links 

> Format frame borders 

> Create a structuring table 
> Add a two-toned background 
> Create a template 


HTML was originally designed for identifying the content of each element on a 
Web page, rather than specifying how an element should appear in a browser. In 
early versions of the language, this underlying intent meant that Web designers 
couldn't implement the layout and readability features routinely found in print 
media. However, in the course of updates and extensions to HTML, the language 
added two features that opened the door to high-quality page layout on the Web: 
frames and tables. Frames allow you to divide the browser window into parts, 
each of which appears as a separate HTML document. Tables, in addition to dis- 
playing related data within a grid, also can create a page layout much like those 
created with frames. However, pages using tables can be easier to navigate than 


pages with frames, and are accessible to more users. fie» Jaime Chavez works 


in the Information Systems department at Nomad Ltd, a travel and sporting goods 
company. He is responsible for converting Nomad’s Web site to a new design, and 


for making the pages easier for users to navigate. 


Understanding 
_ HTML Layout Tools 


An important feature of any visual layout designed to convey information is the layout’s division 
into discrete sections. While you can divide a page using HTML elements such as headings and 
line breaks, such a format is linear, meaning it limits you to stacking page elements above and 
below each other, and provides few options for horizontal placement. Frames and tables both 
facilitate more effective layouts in HTML by allowing you to place elements anywhere on the 
screen, and by providing additional means of indicating divisions between them. In a frames 
page, such as the one shown in Figure F-1, each section of the page appears as a separate HTML 
document. A page organized with a table, as shown in Figure F-2, includes the entire page con- 
tents in one HTML file. Using either layout tool, you have the choice of displaying or hiding bor- 
ders, and each option is appropriate for creating different effects. Qi» As Jaime prepares to 
enhance the layout of the Nomad Ltd Web pages, he reviews the principal advantages of laying 
out a Web site using frames and tables. 


groups a page’s elements. You can easily add a grid to a Web page by creating columns and rows 
with the HTML table tags. Implementing frames also provides this underlying structure, as each 
frame can serve as a separate column or row. The ability to create a layout grid is the underlying 
feature of tables and frames that makes them both especially valuable for page layout. 


A Unified appearance 

As you incorporate more pages into a Web site, it becomes important to ensure that users can 
easily navigate the site. After following a trail of links away from the home page, a user may wish 
to explore another area of the site. Rather than requiring users to return to the main page, well- 
designed sites usually include a navigation bar—a set of links to the home page and main sec- 
tions of the site—which appears on every page. In the most user-friendly sites, the navigation 
bar, as well as other page elements, appear in the same location on each page, giving all the site’s 
pages a unified appearance. This predictable layout reassures users that they won’t get lost, and 
encourages them to explore the site. You can easily implement a unified appearance on your site 
by creating a template document that codes only for the site’s page structure, and by using this 
document as the basis for each Web page. 


FIGURE F-1: Web page layout using frames 
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€) Creating a Navigation 
om | Bar 


Although you can add a simple navigation bar to any page layout, creating a grid layout provides 
more choices for the bar’s formatting and its location on the page. You can position the bar’s 
paragraphs or graphics at the bottom of the screen in a linear layout, but positioning the bar in 
the same place on each page could require adding imprecise spacing elements, such as line breaks. 
By contrast, when using a frame or a table you can specify the exact dimensions of each compo- 
nent part, allowing you to easily use a consistent page location. Additionally, in a grid layout you 
can create a vertical navigation bar, running along the left or right edge of the browser window, 
and include other page elements alongside it. @jqgam= Jaime begins his redesign by creating a 
navigation bar which he can then incorporate into the page layout for the Nomad Web site. 


1. Start your text editor, open the file HTM F-1.htm, then save it as navbar.htm 
Jaime created an HTML document containing the link text for a vertical toolbar, the codes 
for the Nomad Ltd logo, and a site search form. 


2. Locate the <IMG> tag that references the graphic gear.gif, click to the left of the 
opening <, then type <A HREF="construction.htm"> 


Jaime links the navigation bar elements to a placeholder file until he creates the remaining 
Web pages for the site. 


3. Click to the right of the closing > for the gear.gif <IMG> tag, then type </A> 
4. Repeat Steps 2 and 3 for the <IMG> tags for the files travel.gif and about.gif 


The graphics serve as headings that divide the links in the navigation bar by the site’s three 
main sections. 


5. Locate the <LI> tag for the text Hiking/Camping, click to the right of the closing >, type 
<A HREF="construction.htm'>, click at the end of the same line, then type </A> 


6. Repeat Step 5 for the remaining list items in the navigation bar’s three unordered lists 
Figure F-3 shows the completed code for the links in the navigation bar. Jaime created most 
of the links with text, rather than graphics, so the Web page’s download time is kept to a 
minimum. 


7. Save your work, start your Web browser, cancel any dial-up operations, then open the 
file navbar.htm 
As shown in Figure F-4, the list of links appears on the left edge of the screen, along with the 
logo and the search form. Jaime can incorporate this navigation bar into the layout for each 
page in his new site design. 


FIGURE F-3: Web page code for navigation bar 
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formatted as links <H5>updated August 24, 2002</H5> 


FIGURE F-4: Navigation bar 
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E) Creating a Frameset 


In a Web page laid out with frames, each frame displays the contents of a separate HTML docu- 
HTML ment. These component documents are created with the same tags used for standard Web pages. 
o To specify the organization of these files within the browser window—known as a frameset— 
you create a separate HTML document that includes only the page’s structural information. 
Figure F-6 shows the relationship between HTML files in a frames page. The organizing docu- 
ment requires three HTML tags and tag pairs to describe the frame layout. The tags and tag pairs 
are described in Table F-1, along with their attributes. Gum Jaime has divided the contents of 
his new design into two separate HTML documents, similar to the sketch in Figure F-6. Each 
document will appear in a frame on the Nomad Ltd home page. Jaime lays out the page by cre- 
ating a frameset. 


In your browser, open the file main.htm 

This is the Nomad Ltd home page that will appear in the right frame of the frameset when 
users first opens the Nomad Web site. For the content of the left frame, Jaime will use the 
navigation bar he created. 


. In your text editor, start a new document, if necessary, and save it as nomad-f1.htm 
. Type <HTML>, press [Enter] twice, type <HEAD>, press [Enter], type <TITLE>Nomad Ltd 


online</TITLE>, press [Enter], type </HEAD>, then press [Enter] twice 
Type <FRAMESET COLS="235,*" FRAMEBORDER="0">, then press [Enter] 


<FRAMESET> is the opening tag that marks the contents of a frameset. In a frameset docu- 
ment, this tag replaces the standard HTML <BODY> tag. You use the COLS attribute to 
indicate the width of each column, in pixels. Jaime specifies the width of the first column— 
the navigation bar—as 235 pixels, and uses an asterisk (*) for the width of the second col- 
umn, indicating that it should occupy the remaining width of the browser window. He sets 
the FRAMEBORDER attribute equal to zero to remove the default border that appears 
between frames. 


Press [Spacebar] twice, type <FRAME SRC="navbar.htm" NAME="nav">, press 
[Enter], press [Spacebar] twice, type <FRAME SRC="main.htm" NAME="main">, 
press [Enter], type </FRAMESET>, then press [Enter] twice 


Each frame requires a <FRAME> tag that specifies the name and location of its source file 
using the SRC attribute. It also is important to name each frame using the NAME attribute, 
so that each frame’s hyperlinks work properly. 


. Type <NOFRAMES>, press [Enter], type This page was designed to be viewed with 


frames. You can open individual pages using the <A HREF="navbar.htm">navigation 
bar</A>., press [Enter], type </NOFRAMES>, press [Enter] twice, then type </HTML> 
Figure F-7 shows the completed code for the frameset Web page. The text enclosed in the 
<NOFRAMES>..<NOFRAMES> tag pair appears in the window of a browser that does not 
support frames. Jaime’s alternate text provides a link to the navigation bar, and ensures that 
users of older browsers still can access the entire site. 


. Save your work, click the browser program button on the taskbar, then open the file 


nomad-f1.htm 
The browser displays both frames, as shown in Figure F-8. Notice that each frame includes a 
toolbar, allowing you to scroll one side of the screen without moving the other side’s contents. 


FIGURE F-6: HTML files composing a frames page | 
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FIGURE F-7: Code for frameset file 
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FIGURE F-8: Frames page in browser 
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TABLE F-1: Frame tags and attributes 


tag(s) | description | attributes | function | 
<FRAMESET>.. mark frameset contents and describe ROWS defines number and sizes of horizontal frames to create 


</FRAMESET> their layout 
FRAMEBORDER turns border between frames on or off; set to “0” or “no” to 


turn borders off 


<FRAME> specifies a frame's source file SRC defines location and filename for frame contents 
and name 
NAME defines frame name for reference by hyperlinks 
<NOFRAMES>.. define alternate page content for browsers 
<NOFRAMES> that don’t support frames; require no 
attributes 


€) | Targeting Links 


When you click a link in a standard Web page, your browser usually displays the linked page in 
HTML place of the current one. In a page structured with frames, however, you can choose in which 
a frame the linked page will open. This feature of frames has facilitated a popular frameset layout 
that fixes a page of links in one frame, and displays content in another frame. When users click a 
link, the content of the other frame changes, but the display of links is preserved for further nav- 
igation. HTML offers two methods for setting the location where a linked page opens. One 
option is to add the TARGET attribute to a link’s <A> tag, and set this attribute equal to the 
name of the frame in which the linked page should open. You also can create a global setting for 
all of a page’s links by adding the <BASE> tag to the page’s head section, and assigning the tag 
the appropriate TARGET setting. Table F-2 explains TARGET values with special behaviors. 
(f= Jaime wants the navigation bar to remain visible to users as they explore the Nomad Ltd 
Web site. He adds the <BASE> tag with the TARGET attribute to the page’s head section. Then 
when navigation bar links are clicked, the target pages open in the right frame of the frameset. 


1. Make sure the file nomad-f1.htm is open in your browser, click a link in the navigation 
bar, then click the Back button 
When you click a link, the navigation bar is replaced by the link target file, construction.htm, 
and is no longer available in the frameset. By default, a linked page opens in the same frame 
as the link that opened it. 


2. In your text editor, open the file navbar.htm 


3. Locate the </TITLE> tag in the head section, click to the right of the closing >, press 
[Enter], then type <BASE TARGET="main"> 
Figure F-9 shows the Web page code containing the <BASE> tag. When he created the 
frameset file, Jaime assigned the name “main” to the frame on the right side of the screen. By 
setting the TARGET attribute in the <BASE> tag, Jaime allows users to click any link in the 
left frame—the navigation bar—to change the contents of the right frame. 


4. Save your work, click the browser program button on the taskbar, then hold down 


[Shift] while you click your browser’s Reload or Refresh button 
In a frameset, refreshing the page simply reloads the current pages in each frame. Holding 
down [Shift] while refreshing reloads the default pages specified in the frameset file. 


5. Click a link from one of the unordered lists in the navigation bar 
As shown in Figure F-10, a linked page opens in the right frame, and indicates that the site is 
still under construction. The navigation bar remains in the left frame, allowing you to con- 
tinue moving around the site. 


6. Click your browser's Back button, then click one of the linked graphics in the right frame 
The “under construction” page opens in the right frame. Because Jaime’s opening page for 
the right frame doesn’t specify a TARGET value for the links, the linked pages open by 
default in the same frame, as Jaime intended. 


FIGURE F-9: Web page code specifying link target 
<HTML> 


<HEAD> 

<TITLE>Nomad Ltd navigation bar</TITLE> 
<BASE TARGET="“main"> 

</HEAD> 
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TABLE F-2: Special values for the TARGET attribute 


value | link behavior 


_self opens in current frame; this is the default setting 


_parent replaces current frameset; always include for links to pages outside your frameset 


_top replaces contents of current browser window 
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HTML 


Formatting Frame 


Borders 


Like most other Web page elements, frames support the attributes that change the frames’ appear- 
ance in a browser. Several of these attributes are similar to those used to format tables. Although no 
borders appear between frames by default, you can use the FRAMEBORDER attribute in the 
<FRAMESET> tag to add them. Once a frameset includes borders, you can use other attributes to 
control border thickness and color, as well as the width of the margin between a frame’s border and 
its contents. By default, Web page users can move the borders between frames to change the 
amount of the browser window that each frame occupies. If you want to make sure your layout 
remains fixed, you can add the NORESIZE attribute to <FRAME> tags to ensure that the frames 
remain the width or height you specified in the <FRAMESET> tag. Table F-3 describes several 
attributes available for formatting frames. @fiæ= Jaime wants to experiment with borders and 


eee) border formats in his layout. 


1. In your text editor, open nomad-f1.htm 


2. Locate the opening <FRAMESET> tag, select the text FRAMEBORDER="0", press 
[Delete], then, if necessary, again press [Delete] or press [Backspace] to remove 
the extra space before the closing > 


3. Save your work, click the browser program button on the taskbar, then hold down 
[Shift] while you reload nomad-f1.htm 


A vertical line marks the border between the two frames. 


4. Move the pointer over the frame border, then click and drag to the right 
The pointer changes to a double arrow, indicating you can resize the frames. Dragging the 
border to the right resizes each frame. 


5. In your text editor, locate the opening <FRAMESET> tag, click to the left of the clos- 


ing >, press [Spacebar], then type BORDER="2" FRAMESPACING="2" 

The BORDER and FRAMESPACING attributes change the thickness of borders between 
frames. Because each attribute is appropriate for different browsers, Jaime uses both with 
the same setting to ensure his frames appear similarly to all users. 


6. Click to the left of the closing > in the first <FRAME> tag, press [Spacebar], then 


type NORESIZE 

Figure F-11 shows the completed code for the frameset document. Adding the NORESIZE 
attribute to a <FRAME> tag prevents users from resizing that frame, as well as adjoining 
frames, in the browser window. 


7. Save your work, click the browser program button, then hold down [Shift] while you 


reload nomad-f1.htm 
As shown in Figure F-12, the border between the two frames appears narrower. 


8. Move the pointer over the frame border, then click and drag to the right 
Because you added the NORESIZE attribute to the left frame, the pointer does not change to a 
double arrow, and the frame border remains in its original location to maintain the frame sizes. 


FIGURE F-11: Web page code for formatting frame borders 


<HTML> 
<HEAD> 


<TITLE>Nomad Ltd online</TITLE> 
</HEAD> 


<FRAME SRC="“navbar.htm” NAME="“nav™ NORESIZE> 
<FRAME SRC="main. htm" NAME="main™> 
< /FRAMESET> 


<NOFRAMES > 


< /NOFRAMES > 


</HTML> 


FIGURE F-12: Web page displaying border between frames 
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TABLE F-3: Frame formatting attributes 


© | ‘Schedule your vaccine against cabin fever 
Nomad winter tours! 


ATHLETE 
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tag | attribute | function 


<FRAMESET> FRAMEBORDER determines whether or 
not borders appear 


BORDER specifies the space between frames 


in more recent browsers 


FRAMESPACING specifies the space between frames 
in older browsers 


BORDERCOLOR customizes color of lines separating frames 


<FRAME> MARGINHEIGHT specifies space between frame contents and 


top and bottom borders 


MARGINWIDTH specifies space between frame contents and 
left and right borders 


NORESIZE prevents users from changing a 


frame's dimensions 


SCROLLING controls the appearance of the frame’s 
scrollbars 
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| allowable values 


“0” or “no” turns off borders; “1” or “yes” 
enables borders (the default setting) 


a size in pixels 


a size in pixels 
hexadecimal color value or corresponding color name 


a size in pixels 


a size in pixels 


requires no value; the presence of NORESIZE 
enables this option 


“yes” always includes scrollbars; 
“no” prevents scrollbars from appearing; 
when attribute is absent, scrollbars appear only as needed 


_ HTML 


A few cells in the nested 
tables use the closing </TD> 
tag; while this tag is nor- 
mally unnecessary, without it 
the contents of nested tables 
can unpredictably appear in 
some browsers. 


Just as in a table with 
other contents, you can 
include multiple rows in a 
structuring table. 


Creating a 
Structuring Table 


Besides using frames, you also can lay out a Web page in a grid by using a structuring table. This 
method reverses the way you are used to working with tables. Rather than including a table as 
one of a Web page’s elements, you include all the page elements within one large table. A struc- 
turing table offers positioning benefits similar to frames, yet it simplifies for your users some of 
the practical aspects of working with the Web page. @jfqgum= Jaime decides to try his layout in a 
structuring table, to compare its appearance with frames. Some areas of his Web page are already 
positioned using their own tables. These tables will in turn be the contents of individual cells in 
the structuring table, making them nested tables. 


1. In your text editor, open the file HTM F-2.htm, then save it as nomad-f2.htm 


Jaime created this file by pasting the contents of both frames from the frameset into a single 
HTML document. He also indented each line six extra spaces—two each for the <TABLE>, 
<TR>, and <TD> tags in which each element will be nested. 


2. Click in the blank line beneath the opening <BODY> tag, press [Enter], type <TABLE 
BORDER CELLSPACING="0">, then press [Enter] 


Although a borderless structuring table is usually the most effective for layout, Jaime temporarily 
turns on the borders to facilitate the creation and editing process. 


3. In the blank line below the <TABLE> tag you just entered, press [Spacebar] twice, 
then type <TR> 


4. Locate the <FONT> tag, click to the left of the opening <, then type <TD 
WIDTH="235"> 


Figure F-13 shows the opening code for the structuring table. 


5. Locate the <IMG> tag for the graphic welcome.jpg, click to the left of the opening <, 
then type <TD VALIGN="top"> 


Because Jaime does not specify a WIDTH value for the second column, it will occupy the 
remaining width of the browser window. 


6. Click the blank line above the closing </BODY> tag, press [Enter], press [Spacebar] 


twice, type </TR>, press [Enter], type </TABLE>, then press [Enter] 


Figure F-14 shows the code for the right column, and the closing code for the structuring table. 


7. Save your work, click the browser program button on the taskbar, then open the file 


nomad-f2.htm 
The layout is nearly identical to the one Jaime created with frames. 


8. In your text editor, scroll to the <TD> tag for the left cell in the structuring table near 
the top of the document, select the number 235, press [Delete], then type 220 


Because the cell containing the navigation bar doesn’t need to be as wide as the frame that 
contained it in the frameset, Jaime tries a lower WIDTH setting. 


9. Save your work, click the browser program button on the taskbar, then open the file 


nomad-f2.htm 
As shown in Figure F-15, the structuring table re-creates the layout of the frameset. 


FIGURE F-13: Opening Web page code for structuring table 
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tags, and tag for first cell <FORM NAME: "sitesearch"> 


FIGURE F-14: Additional Web page code for structuring table 
<H5>updated August 24, 2002</H5> 
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FIGURE F-15: Web page laid out with structuring table 
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Watch and take part 
in various sports. 


Leisure 


Relax and rejuvenate 
on quiet trips to 
secluded retreats. 


Experience the world's 
traditional performing 


arts at their sources. 
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Adding a Two- Toned 
Background 


When you create a page with frames, it’s easy to distinguish the contents of separate frames by 
formatting each frame’s background with a different graphic or color. The process for differen- 
tiating cell contents in a structuring table, however, is more restricted. While the <FRAME> tag 
supports settings for background images or color, not all browsers can display a background 
image for a table cell. Different colored cell backgrounds are a fine choice for many layouts. 
However, tables are always separated from the window edges by a margin of space, so Web 
designers have invented other solutions to create a frames-like layout. One of the most popular 
solutions is to use a customized graphic as the background for the entire page. By matching the 
measurements of the structuring table cells, the graphic can display a background image—usu- 
ally in a vertical strip—behind the appropriate part of the Web page. @fim== Jaime wants to 
include a background behind the navigation bar (as he did in the frames version of the page), in 
order to set it clearly apart from the rest of the page. 


1. In your text editor, locate the <ID> tag for the first table cell, click to the left of the 
closing >, press [Spacebar], then type BECOLOR="#DAC79E" 


Jaime experiments first with adding a background color to the navigation bar cell. 


2. Save your work, click the browser program button on the taskbar, then reload 


nomad-f2.htm 
As Figure F-16 shows, the table displays the background color only within the borders of the 
navigation bar cell. 


3. In your text editor, select the text BECOLOR="#DAC79E" that you typed, press 
[Delete], again press [Delete], or press [Backspace] if necessary, to remove the 
extra space 


4. Locate the opening <BODY> tag, click to the left of the closing >, press [Spacebar], 
then type BACKGROUND="images/tablebg.jps" 


9. Save your work, click the browser program button on the taskbar, then reload 
nomad-f2.htm 
The background image appears behind the contents of the left column only. Because 
browsers normally tile images to cover the entire Web page background, the Nomad Web 
design team set up the dimensions of this image to be wider than a normal browser window. 
The background pattern appears in the left edge of the image. The rest of the image is blank, 
ensuring that the background pattern appears behind only one column. 


6. In your text editor, locate the opening <TABLE> tag for the structuring table, click to 


the right of the word BORDER, then type ="0" 
Figure F-17 shows the completed code for the Web page. Because he has finished setting up 
the page, Jaime turns off borders on the structuring table to view the page’s final appearance. 


7. Save your work, click the browser program button on the taskbar, then reload 


nomad-f2.htm 
Figure F-18 shows the final appearance of Jaime’s Web page. 


FIGURE F-16: Navigation bar formatted with table cell background color ~] 


ose z saa 
Color appears 
only within cell nad win: 
borders a a 
Travel, relax, and play! 
Watch and take part t. P 
in various sports. e 1 $ n a E 
Relax and rejuvenate 
on quiet trips to 
Arts secluded retreats. 
Experience the world's 
traditional performing 
arts at their sources. 
FIGURE F-17: Web page code containing final changes for background and border 
Adds back- <HEAD> 
3 <TITLE>Nomad Ltd online</TITLE> 
ground image NK uEap> 
behind 


navigation <BODYNBACKGROUND: "images/tablebg. jpg’) 


bar only 
<TABLE CELLSPACING= "0"> 
<TR> 
D WIDTH="220"><FONT FACE="arial, helvetica, sans serif"> 
Removes 


borders from 
structuring table 


FIGURE F-18: Final Web page layout with structuring table 
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HTML 


Creating a Template 


Once you finalize your site layout with a structuring table, it’s important to uniformly imple- 
ment the layout on all your Web site’s pages. Rather than reentering the code for common ele- 
ments for every page in your site, however, you can facilitate the application of your design by 
creating a template. A template contains the Web page code for the page’s structure, along with 
any text or other elements that appear on every page. You can create a template by removing the 
page-specific items from your original layout. It also is good practice to add comments to the 
code, so that anyone using the template clearly understands where to insert their own page-spe- 
cific elements. You then can use the template as a starting point to create each additional page 
for the Web site. @fimæ= After he presented his samples of both options and explained the 
advantages and drawbacks of each, Jaime’s Web design team decided to use his structuring table 
design for the entire Nomad Web site. Jaime wants to create a template from his Web page to 
make the team’s work on the site more efficient, and to ensure that each team member imple- 
ments the same layout. 


1. In your text editor, save a copy of nomad-f2.htm as nitemp-f.htm 


2. Locate the <BODY> tag, click the blank line below the tag, press [Enter], type <!-- Web 
page structuring table, one row by two columns -->, then press [Enter] 


3. Locate the <TR> tag for the structuring table, click to the right of the closing >, 
press [Enter] twice, type <!-- first column - site-standard navigation bar -->, then 


press [Enter] 
Figure F-19 shows the Web page code containing the first two comments. 


4. Click the blank line below the text updated August 24, 2002, press [Enter], type 
<!--second column - page-specific content -->, then press [Enter] 


5. Click and drag to select the text shown in Figure F-20, beginning with the <IMG> tag 
for the graphic welcome.jpg and ending with the </A> tag for the graphic skibar.jpg, 


then press [Delete] 
Figure F-21 shows the end section of the template with page-specific content removed. 
Jaime deleted the contents of the right column in the structuring table, leaving just the 
<TD> tag for the cell. 


6. Save your work, then close your text editor and browser 


FIGURE F-19: Opening comments in Web page template code 


<BODY BACKGROUND="“images/tablebg. jpg"> 
ł-- Web page structuring table, one row by two columns --> 


<TABLE BORDER="0" CELLSPACING="0"> 


Comments <TR> 

describing 

page layout \<!-- first column - site-standard navigation bar --> 
components 


<TD WIDTH="220"><FONT FACE=“arial, helvetica, sans serif”™> 


FIGURE F-20: Template code showing content to delete 


Comments <H5>updated August 24, 2002</H5> 
marking o. 
page-specific ¥--second column - page-specific content --> 


cell tag 


Page-specific 
content to 
delete 


<A HREF="construction.htm"><IMG SRC="images/skibar .jpg" WIDTH="500" 
HEIGHT="63" BORDER="0" ALT="Ski off into the sunset - Fall into Winter sale, 
October 3-8"></A> 


</TR> 
</TABLE> 


FIGURE F-21: Template code with page-specific content deleted 


<H5>updated August 24, 2002</H5> 
K%--second column - page-specific content --> 
<TD VALIGN="top™> 


</TR> 
</TABLE> 
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- Practice 


> Concepts Review | 


Describe the function of each tag and attribute marked in Figure F-22. 


FIGURE F-22 
<HTML> 4 


<HEAD> 
1 <TITLE>Nomad Ltd online</TITLE> 
AD> 


2 RAMESET ||COLSF "235, x" "2" IFRAMESPACING 
<FRAME SRC="“navbar. htm” NAME="nau"> 


<FRAME SRC="“main.htm" NA@ME="main"> re 6 
FRAMESET p> 


NOFRAMES> 
This page was designed to be viewed with frames. You can open individual pages 
pag 9 p pag 


using the <A HREF=“navbar htm” >navigation bar</A>. 
/NOFRAMES> 


</HTML> 


Match each term with its description. 


7. Template a. A file specifying the organization of frame files within the browser window 
8. Frameset b. A set of links to the home page and main sections of a Web site, and which 
9. Frame appears on every page 
10. Grid c. A tool containing the Web page code for the structural and content elements 
11. Navigation bar that appear on all the pages in a Web site 
d. A window within a frameset, which displays a separate HTML document 


[a] 


. A set of columns and rows that positions and groups a page’s elements 


Practice 


Select the best answer from the list of choices. 


12. In a Web page laid out with frames, each frame displays 
a. The contents of a separate Web document. 
b. The contents of a table cell. 
c. A hyperlinked page. 
d. The same Web document. 


13. Which tag would you use to set all of a frame’s links to open in a different frame? 
a. <BODY> 
b. <HEAD> 
c. <BASE> 
d. <!-- 


14. Which attribute do you use to name a frame? 
a. ID 
b. NAME 
es TILE 
d. TARGET 


15. What is the function of the FRAMEBORDER attribute? 
a. Determines whether or not borders appear 
b. Specifies the space between frames 
c. Specifies space between frame contents and top and bottom borders 
d. Specifies space between frame contents and left and right borders 


16. What is the function of the BORDER and FRAMESPACING attributes? 
a. Determine whether or not borders appear 
b. Specify the space between frames 
c. Specify space between frame contents and top and bottom borders 
d. Specify space between frame contents and left and right borders 


17. To add a background image to a section of the screen, rather than to a table cell, when you use a structur- 
ing table, you reference a special graphic file in which tag? 
a. <TABLE> 
b. <TR> 
c. <TD> 
d. <BODY> 
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18. How many HTML files would you need in order to create a frameset that displays three frames? 
a. One 
b. Two 
c. Three 
d. Four 


19. Which tag defines an individual frame? 
a. <TABLE> 
b. <FRAME> 
c. <FRAMESET> 
d. <NOFRAMES> 


B Skills Review 


1. Create a navigation bar. 
a. Start your text editor, open the file HTM F-3.htm, then save it as cco-nav.htm. 
b. Use <A>..</A> tags with the HREF attribute to format the graphic cco.gif, and the text “Home” in the first 
list item in the unordered list, as links to the file cco-main.htm. 
c. Format the text for the remaining list items as links to the file construction.htm. 
d. Save your work, start your Web browser, cancel any dial-up operations, then open the file cco-nav.htm. 


N 


. Create a frameset. 

a. In your browser, open the file cco-main.htm. 

. In your text editor, open a new document, and save it as cco-f1.htm. 

. Enter the opening tags for the document, head, and body, including the page title “Crystal Clear Opticals”. 

. Inthe page’s body section, enter the opening tag for a frameset with two frames and no border; the width of 
the first frame should be 240 pixels, and the second frame should occupy the remaining space. 

. Below the frameset tag, add a tag for each of the frames on an indented line. The source of the first frame is 
the file cco-nav.htm, and it should be named nav; the source of the second frame is the file cco-main.htm, 
and it should be named main. 

. Add the following text to the page, formatted to appear only to users whose browsers do not support frames: 
“This page was designed to be viewed with frames. You can open individual pages using the 
<A HREF="cco-nav.htm">navigation bar</A>.” 

g. Save your work, click the browser program button on the taskbar, then open the file cco-fl.htm. 


ia) a0 mw 


= 


oo 


. Target links. 

a. Make sure the file cco-fl.htm is open in your browser, click a link in the navigation bar, then click the Back 
button. 

b. In your text editor, open the file cco-nav.htm. 

. Add HTML code to the page’s head section. The code should target all links in the navigation bar to open in 
the frame named main. 

. Save your work, click the browser program button on the taskbar, then hold down [Shift] while you click your 
browser’s Reload or Refresh button. 

e. Click a link in the navigation bar. 


iv) 


Qa. 


Practice 


4. Format frame borders. 


on 


a 


~ 


a. 
. In the opening tag for the frameset, remove the attribute that suppresses frame borders. 

. Add HTML code to the document to display a two-pixel border between frames in all compatible browsers. 
. Add HTML code to the document to prevent users from changing frame sizes. 

. Save your work, click the browser program button on the taskbar, then hold down [Shift] while you reload 


D ao aw 


C. 


a 


f. 


C. 


d. 


D 
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In your text editor, open the file cco-f1.htm. 


cco-fl.htm. 


. Create a structuring table. 
a. 
b. 


In your text editor, open the file HTM F-4.htm, then save it as cco-f2.htm. 

At the beginning of the page’s body section, add an opening table tag that includes the HTML code to display 
table borders and which sets the space between cells to zero. 

In the line below the opening table tag you just entered, indent two spaces and enter an opening row tag. On 
the next line indent four spaces and enter an opening table cell tag. 


. Scroll down to the blank line above the opening table tag for the borderless table below the navigation bar 


section, indent four spaces, then add a table cell tag. 


. In the blank line above the closing tag for the page’s body section, insert two spaces, enter a closing row tag, 


then insert a new line and enter the closing table tag. 
Save your work, click the browser program button on the taskbar, then open the file cco-f2.htm. 


. Add a two-tone background. 
a. 


In your text editor, edit the table tag for the first cell in the structuring table to include the background 
color #A8A8A5. 


. Save your work, click the browser program button on the taskbar, then reload the file cco-f2.htm. 
. In your text editor, remove the code for the background color that you inserted, then add code to the opening 


body tag to use the graphic graybg.jpg (located in the images folder) as the page background. 


. Save your work, click the browser program button on the taskbar, then reload the file cco-f2.htm. 
. In your text editor, edit the opening table tag for the structuring table and make the borders invisible. 
. Save your work, click the browser program button on the taskbar, then reload cco-f2.htm. 


. Create a template. 
a. 
b. 


In your text editor, save a copy of cco-f2.htm as ccotmp-f.htm. 

Add a comment below the opening tag for the body section, stating that the following section is the page’s 

structuring table. 

Add a comment before the tag for the first cell in the structuring table that describes the column and con- 

tents that follow. 

Add a comment before the tag for the second cell in the structuring table that describes the column and its 
contents. 


. Delete the text that appears after the tag for the second cell in the structuring table and before its closing row 


tag (the text to delete begins with “<TABLE WIDTH="520">”, and ends with “</TABLE>”). 


. Save your work, click the browser program button on the taskbar, open the file ccotmp-f.htm, then close your 


text editor and browser. 
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> Independent Challenges | 


J. You maintain a Web site for your computer consulting business, Star Dot Star. To advertise your Web design 
expertise, you decide to redesign your site by using a structuring table and incorporating a navigation bar. 
To complete this independent challenge: 


a. Use a borderless table to create a navigation bar based on the bulleted list in the file HTM F-5.htm. Include the 
logo graphic in the file sds.jpg in your layout, and save your work with the filename sds-f.htm. 

b. Lay out your Web page using a structuring table with one row and two columns; the navigation bar should 
appear in the left column, and the contents of the file HTM F-6.htm should appear in the right column. Use the 
graphic file sdsbg.jpg as the page’s background image. 

c. Create a template from your file for the site’s remaining pages, and save it with the name sdstmp-f.htm. Be 
sure to include comments for other designers who might use the template. 


P. You are part of the Web site maintenance team in your job at Metro Water, the local water supplier. As you con- 
tinue to add more pages to the Web site, you decide to redesign the page to include a navigation bar and a consistent 
layout between pages by using a structuring table. 

To complete this independent challenge: 


a. Use a borderless table to create a navigation bar based on the bulleted list in the file HTM F-7.htm; include the 
logo graphic in the file mw.gif in your layout, and save your work with the filename mw-f.htm. 

b. Lay out your Web page using a structuring table with one row and two columns; the navigation bar should 
appear in the left column, and the contents of the file HTM F-8.htm should appear in the right column. Use the 
graphic file waterbg.jpg as the page’s background image. 

c. Create a template from your file for the site’s remaining pages, and save it with the name mwtemp-f.htm. Be 
sure to include comments for other designers who might use the template. 


J. You have created and implemented an HTML-based in-store information system for your video store, Film Clips. 
To make the site easier for customers to use, you decide to standardize the layout of all pages and add a navigation bar. 
Because the system is used only in your store, and bookmarking and printing are not issues, you decide to implement 
your design with frames. 

To complete this independent challenge: 


a. Create a Web page to serve as the navigation bar, saving it with the name fc-nav.htm. Include the Film Clips 
logo, which is provided in the graphic file fclogo.gif in the images directory. Divide the links into three sec- 
tions—Videos, Games, and About Film Clips. Each section should include links to at least four subcategories 
(for example, Videos can include sublinks to different film genres). 

b. Create a home page to appear in the right frame of your frameset, and save it with the name fc-main.htm. 
Include at least one topical clipart image; make up text you might expect to find on such a page. 

c. Create a frameset file for the site, saving it with the name fc-f.htm. Size the frames as is appropriate, and turn 
on and format borders if you wish. 

d. Preview the file fc-f.htm in your browser, then make changes to the component files as necessary. Be sure to 
format at least one of the frame files with a background color or image. 


Practice 


RK Æ. Although frames have advantages over structuring tables in some circumstances, their use in well- 

` 8 S 8 
%& designed Web pages is rare. Ever since their introduction in an HTML revision, frames have generated 
u heated debate among Web designers and users; some people still have strong feelings on the issue, both 


= 


~ pro and con. 
To complete this independent challenge: 


. Connect to the Internet and use a search engine to find and view Web pages that argue for and against using 


frames in Web page design. Use your favorite search engine, or one of the following: 

www.google.com 

www.lycos.com 

www.hotbot.com 

If you have trouble locating a search engine, go to www.course.com, navigate to the page for this book, click the 
link for the Student Online Companion, click the link for this unit, and use the links listed there as a starting 
point for your search. 


. Read at least four pages that argue one side or the other of this issue, then write a paragraph summarizing 


each viewpoint; for each page include the URL, information about the author, whether they argue for or against 
frames, and the points they make to support their argument. 


. Write an additional paragraph or two giving your opinion of designing Web pages with frames in light of what 


you've read; reference specific Web pages, this text, or your own experience to support your points. 


. Disconnect from the Internet. 
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You are updating the layout for the Web site you created in your job at Touchstone Booksellers. Create the ayau 
shown in Figure F-23, using your choice of either frames or a structuring table. The navigation bar graphic, book.gif, 
and the graphic in the main page section, bookfair.gif, are located in the images folder. For a structured table, use the 
file tsbbg.jpg as the background; for frames, use color #8F8FBD. In either layout, the khaki color behind the text in the 
main page is #9F9F39. Save the table or frameset file with the name tsb-f.htm. If you create a frameset, save the naviga- 
tion bar frame with the filename tsb-nav.htm. Save the main frame with the filename tsb-main.htm. 


FIGURE F-23 


Touchstone Booksellers 


Specializing in nonfiction of all types 


Touchstone Booksellers: an independent, 
locally-owned bookstore since 1948. 
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